<template>
  <FormDesignLayout>
    <FormDesignerLeftSide @rebind="rendered" :selectedField="selectedField" @selectedChange="selectedChange" v-model="formDefinition" slot="left"/>
    <FormDesignerRightSide :selection="selection" :selectedField="selectedField" :selectedView="selectedView" v-model="formDefinition" slot="right"/>
    <FormDesignerContainer @rebind="rendered" :selectedView="selectedView" :formDefinition="formDefinition" :showGrid="showGrid"/>
    <FormDesignerHeader @showGridChange="showGridChange" :showGrid="showGrid" :selection="selection" slot="header"/>
    <FormDesignerFooter v-model="selectedView" @change="viewChange" :formDefinition="formDefinition" slot="footer"/>
    {{ $nextTick(rendered) }}
  </FormDesignLayout>
</template>
<script>
import './style.css';
import '@/components/hhd/design/DesignTable/style.css';
import FormDesignLayout from '@/components/hhd/design/FormDesigner/layout/FormDesignLayout.vue';
import FormDesignerLeftSide from '@/components/hhd/design/FormDesigner/FormDesignerLeftSide.vue';
import FormDesignerRightSide from '@/components/hhd/design/FormDesigner/FormDesignerRightSide.vue';
import FormDesignerContainer from '@/components/hhd/design/FormDesigner/FormDesignerContainer.vue';
import FormDesignerHeader from '@/components/hhd/design/FormDesigner/FormDesignerHeader.vue';
import FormDesignerFooter from '@/components/hhd/design/FormDesigner/FormDesignerFooter.vue';
import {createFormDefinition} from '@/components/hhd/design/FormDesigner/types';
import Actions from '@/components/hhd/design/FormDesigner/action/Actions';
import {VueProperties} from '@/utils/FormDesignUtils';
import {getFieldComponent} from '@/components/hhd/design/FormDesigner/field/comps/FieldRegister';
import {createProps} from '@/utils';

export default {
  name: 'FormDesigner',
  components: {
    FormDesignerFooter,
    FormDesignerHeader, FormDesignerContainer, FormDesignerRightSide, FormDesignerLeftSide, FormDesignLayout
  },
  props: {
    formDefinition: createProps(Object, createFormDefinition),
  },
  data() {
    return {
      selection: undefined,
      showGrid: true,
      selectedField: undefined,
      selectedView: undefined,
    };
  },
  mounted() {
    VueProperties.h = this.$createElement;
  },
  methods: {
    showGridChange(showGrid) {
      this.showGrid = showGrid;
    },
    viewChange() {
      this.formDefinition.selectedView = this.selectedView
    },
    rendered() {
      this.bindActions();
    },
    selectedChange(selectedField) {
      this.selectedField = selectedField
      this.action && this.action.setSelectedField && this.action.setSelectedField(selectedField);
    },
    bindActions() {
      this.action = Actions.bind(this.$el, this.formDefinition, {
        selected: selection => this.selection = selection,
        selectField: id => this.selectedField = id,
      });
    },
    check() {
      return new Promise((resolve, reject)=>{
        for (const field of this.formDefinition.fields) {
          let comp = getFieldComponent(field.component)
          if (!comp.comp.checkField(field)) {
            reject(field)
            return
          }
        }
        resolve()
      })
    }
  }
};
</script>
